<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-3.5.0.min.js"></script>
    <title>Document</title>
    <style>
        select{
            width: 300px;
            height: 300px;
            font-size: 25px;
        }
        #selectFurit{
            width: 60px;
            height: 18.5px;
            border: 1px solid #808080;
            border-radius: 2px;
        }
        form{
            margin-left: auto;
            margin-right: auto;
            width: 710px;
        }
    </style>
</head>
<body>
    <form action="">
        <select name="" id="optional" size="5">
            <option value="西瓜" class="furit">西瓜</option>
            <option value="哈密瓜" class="furit">哈密瓜</option>
            <option value="苹果" class="furit">苹果</option>
            <option value="李子" class="furit">李子</option>
            <option value="皇冠梨" class="furit">皇冠梨</option>
            <option value="葡萄" class="furit">葡萄</option>
            <option value="芒果" class="furit">芒果</option>
            <option value="潘石榴" class="furit">潘石榴</option>
            <option value="香蕉" class="furit">香蕉</option>
            <option value="无花果" class="furit">无花果</option>
        </select>
        <input type="button" value="&#187" id="selectFurit">
        <select name="" id="chosen" size="5"></select>        
    </form>
    <script>
        $("#selectFurit").click(function(){
            index = optional.selectedIndex;
            chosen.add(optional.options[index]);
        })
    </script>
</body>
</html>